<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>单项绑定</title>
    <link rel="stylesheet" href="assets/css/demo.css" />
</head>

<body>
    <div id="app">
        <table>
            <tr>
                <td colspan="3">父组件数据</td>
            </tr>
            <tr>
                <td>name</td>
                <td>{{name}}</td>
                <td><input type="text" v-model="name"></td>
            </tr>
            <tr>
                <td>age</td>
                <td>{{age}}</td>
                <td><input type="text" v-model="age"></td>
            </tr>
        </table>
        <my-component v-bind:my-name="name" v-bind:my-age="age"> </my-component>
    </div>
    <template id="myComponent">
        <table>
            <tr>
                <td colspan="3"> 子组件数据</td>
            </tr>
            <tr>
                <td>name</td>
                <td>{{name}}</td>
                <td><input type="text" v-model="myName"></td>
            </tr>
            <tr>
                <td>age</td>
                <td>{{age}}</td>
                <td><input type="text" v-model="myAge"></td>
            </tr>
        </table>
    </template>
    <div id="app2">
        <div id="searchBar">
            Search <input type="text" v-model="searchQuery" />
        </div>
        <simple-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery">
        </simple-grid>
    </div>
    <template id="grid-template">
			<table>
				<thead>
					<tr>
						<th v-for="col in columns">
							{{ col | capitalize}}
						</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="entry in data | filterBy filterKey">
						<td v-for="col in columns">
							{{entry[col]}}
						</td>
					</tr>
				</tbody>
			</table>
		</template>
</body>
<script src="assets/js/vue.js">

</script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            name: "xiaohongs",
            age: 22
        },
        components: {
            "my-component": {
                template: "#myComponent",
                props: ["myName", "myAge"]
            }
        }
    });

</script>
<script>
    	Vue.component('simple-grid', {
			template: '#grid-template',
			props: {
				data: Array,
				columns: Array,
				filterKey: String
			}
		})

		var demo = new Vue({
			el: '#app2',
			data: {
				searchQuery: '',
				gridColumns: ['name', 'age', 'sex'],
				gridData: [{
					name: 'Jack',
					age: 30,
					sex: 'Male'
				}, {
					name: 'Bill',
					age: 26,
					sex: 'Male'
				}, {
					name: 'Tracy',
					age: 22,
					sex: 'Female'
				}, {
					name: 'Chris',
					age: 36,
					sex: 'Male'
				}]
			}
		})
    </script>
</html>